import {useNavigate} from "react-router-dom";
import "./index.scss"
import {getVisitorStats} from "@src/services/userinfo.ts"
import {useRequest} from "ahooks";
import FocusIcon from "@src/assets/focus.svg?react"
const Guidance = () => {
    const navigate = useNavigate();
    const {data} = useRequest(getVisitorStats)

    return <div className="Guidance">
        <div className="Guidance-main">
            <h1 className="fade-in">
                音聊阁
            </h1>
            <h1 className="fade-in">
                <span>聊</span>
                <span>天</span>
                <span>室</span>
            </h1>
            <img src="/logo.jpg" alt="" className="fade-in"/>
            <button className="z-button fade-in" onClick={() => navigate("/login/register")}>进入</button>
            <div className="fade-in today_visitors">
                <p>历史访客:{data?.total_visitors}</p>
                <p>今日访客:{data?.today_visitors}</p>
            </div>
        </div>
        <div className="Guidance-fixed" onClick={()=>navigate("/introduce")}>
            <FocusIcon></FocusIcon>
            <p>关于本站</p>
        </div>
    </div>
}
export default Guidance;